<template>
  <div>
    <dz-header title="购物车"></dz-header>
    <h1 style="color:red;">ShoppingCar.vue 购物车</h1>
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide>
        <div class="page-item">1</div>
      </swiper-slide>
      <swiper-slide>
        <div class="page-item">2</div>
      </swiper-slide>
      <swiper-slide>
        <div class="page-item">3</div>
      </swiper-slide>
      <swiper-slide>
        <div class="page-item">4</div>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      <!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
    </swiper>
    <dzGoods :dLists="goodsLists"></dzGoods>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import dzHeader from "@/components/tabbar/Header";
import dzGoods from "@/pages/goods/Goods";
export default {
  name: "scar",
  components: {
    dzHeader,
    swiper,
    swiperSlide,
    dzGoods
  },
  methods: {},
  data() {
    return {
      goodsLists: [{id:10001,goodname:'宝马'},{id:10002,goodname:'奔驰'},{id:10003,goodname:'大众'}],
      swiperOption: {
        //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        // notNextTick: true,
        // swiper configs 所有的配置同swiper官方api配置
        autoplay: {
          delay: 3000,
          // stopOnLastSlide: false,
          disableOnInteraction: false // 手动切换之后继续自动轮播
        },
        // direction : 'vertical',
        // grabCursor: true,
        // setWrapperSize: true,
        // autoHeight: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        // paginationClickable: true,
        // prevButton: ".swiper-button-prev", //上一张
        // nextButton: ".swiper-button-next", //下一张
        // scrollbar:'.swiper-scrollbar',//滚动条
        // mousewheelControl: true,
        // observeParents: true,
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
// @import "swiper/dist/css/swiper.css";
h1 {
  margin-top: 64px;
}
.page-item {
  height: 200px;
  background-color: red;
}
</style>